<template>

    <!-- 查询条件 -->
    <div>
        功能名称：
        <el-cascader v-model="value" :props="props" :options="options2" @change="handleChange2" />
        &emsp;
        <el-button type="success" :icon="Plus" @click="AddContest">新增功能</el-button>
    </div>

    <!-- 列表显示 -->
    <el-table
        :header-cell-style="{ height: '100px', fontSize: '15px', color: 'black', backgroundColor: 'antiquewhite' }"
        :data="tableData" border style="width: 100%">
        <el-table-column prop="permissionsName" label="功能" />
        <el-table-column label="操作">
            <template #default="scope">
                浏览、增加、删除、编辑
            </template>
        </el-table-column>
        <el-table-column prop="roleName" label="角色" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <!-- 对话框新增 -->
    <el-dialog class="button-container" v-model="dialogFormVisible" title="权限分配" width="500">

        <div>
            <table>
                <tr>
                    <td>功能</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>{{ page.permissionName }}</td>
                    <td>
                        <el-checkbox v-model="form.canView" label=" 浏览" size="large" />
                        <el-checkbox v-model="form.canAdd" label="增加" size="large" />
                        <el-checkbox v-model="form.canEdit" label="删除" size="large" />
                        <el-checkbox v-model="form.canDelete" label="修改" size="large" />
                    </td>
                </tr>
            </table>
        </div>
        <el-table :data="roles" border style="width: 100%;height: 200px" @selection-change="handleSelectionChange">
            <el-table-column type="selection" label="全选" width="55" />
            <el-table-column prop="roleName" label="角色名称" />
        </el-table>
        <el-button type="success" :icon="SuccessFilled" @click="Sumlit" style="margin-left: 200px;">保存</el-button>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    Setting,
    SuccessFilled,
    Close,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
onMounted(() => {
    GetPermission();
    getRoles();
    getOptions2()
})
const page = reactive({

    permissionName: '',
    pageIndex: 1,
    pageSize: 5,
    totalPage: 1,
    totalCount: 1,
});
const changeCeshi = ref([]);
const handleSizeChange = (val: any) => {
    page.pageSize = val;
    GetPermission()
};

const handleCurrentChange = (val: any) => {
    page.pageIndex = val;
    GetPermission()
};

const dialogFormVisible = ref(false);

const form = reactive({
    "rolesIds": [],
    "permissionsId": 0,
    "canAdd": true,
    "canEdit": true,
    "canDelete": true,
    canView: true,
});
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    form.rolesIds = multipleSelection.value.map((item: any) => item.rolesId)
    console.log(multipleSelection.value)
    console.log(form.rolesIds)
}

const AddContest = () => {
    console.log(page.permissionName.trim())
    if (page.permissionName.trim() === '') {
        ElMessage.error("请选择功能")
        return;
    }
    else {
        dialogFormVisible.value = true
    }
}

const tableData = ref([]);
const tableData2 = ref([]);
const GetPermission = () => {
    axios.get('http://localhost:5008/api/RBACs/PermissionList', {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize
        }
    }).then((res) => {

        if (res.data.code == 1) {
            tableData.value = res.data.data
            console.log(res.data.messege)
            page.totalPage = res.data.totalPage
            page.totalCount = res.data.totalCount
        }
        else {
            ElMessage.error(res.data.messege)
        }
    })
}
//工呢级联
const value = ref([])

const props = {
    expandTrigger: 'hover' as const,

}

const handleChange2 = (value: any) => {
    console.log(value)
    form.permissionsId = value[value.length - 1]
    // 获取对应选中的中文标签
    let label = '';
    let options = options2.value;  // 从根级开始查找
    console.log(options)
    value.forEach((v: any) => {
        // 遍历当前级别的选项
        const found: any = options.find((option: any) => option.value === v);
        if (found) {
            label += found.label + ',';  // 拼接中文标签
            options = found.children || [];  // 下一级的选项 
        }
    });
    let n = label.trim().split(',').length - 2
    console.log(label.trim().split(','))
    console.log(label.trim().split(',')[n]);  // 输出完整的中文标签
    console.log(form.permissionsId)
    page.permissionName = label.trim().split(',')[n]//设置中文标签
}
const options2 = ref([])
const getOptions2 = () => {
    axios.get("http://localhost:5008/api/RBACs/GetPermissionCascaderList").then((res) => {
        console.log(res.data.data)
        options2.value = res.data.item
    })
}

//#region 获取角色下拉框数据
const roles = ref<any>([]);
const getRoles = async () => {
    axios.get("http://localhost:5008/api/RBACs/RolesList", {
        params: {
            RoleName: "",
            pageIndex: 1,
            pageSize: 1000
        }
    }).then(res => {
        roles.value = res.data.data;
    })
}
//保存
const Sumlit = () => {
    var obj = {
        "permissionsId": form.permissionsId,
        "rolesIds": form.rolesIds
    }
    axios.post("http://localhost:5008/api/RBACs/PermissionRolesCreate", obj).then((res) => {
        console.log(res.data)
        if (res.data.code == 0) {
            ElMessage.success(res.data.messege)
        }
        else {
            ElMessage.error(res.data.messege)
        }

    })
}





</script>

<style scoped>
.button-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100vh;
    /* 可选，设置容器的高度 */
}
</style>
